<template>
  <div class="min-h-screen flex flex-col">
    <div class="bg-gradient-to-r from-primary to-secondary py-12">
      <div class="container mx-auto px-4">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white">搜索结果</h1>
        <p class="text-white/80 mt-2">找到 {{ searchResults.length }} 个相关城市</p>
      </div>
    </div>
    
    <main class="flex-grow container mx-auto px-4 py-12">
      <div v-if="searchResults.length === 0" class="text-center py-16">
        <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
          <i class="fa fa-search text-gray-400 text-4xl"></i>
        </div>
        <h2 class="text-2xl font-bold text-gray-800 mb-2">未找到相关城市</h2>
        <p class="text-gray-600 mb-6">尝试使用不同的关键词进行搜索</p>
        <button 
          @click="clearSearch"
          class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center transition-colors"
        >
          清除搜索 <i class="fa fa-times ml-2"></i>
        </button>
      </div>
      
      <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <CityCard 
          v-for="city in searchResults" 
          :key="city.id" 
          :city="city" 
          @toggle-favorite="toggleFavorite"
        />
      </div>
    </main>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    
    // 获取搜索结果
    const searchResults = computed(() => store.getters.searchResults);
    
    // 获取搜索查询
    const searchQuery = computed(() => store.state.searchQuery);
    
    // 切换收藏状态
    const toggleFavorite = (cityId) => {
      if (store.getters.isCityFavorite(cityId)) {
        store.dispatch('removeFromFavorites', cityId);
      } else {
        store.dispatch('addToFavorites', cityId);
      }
    };
    
    // 清除搜索
    const clearSearch = () => {
      store.dispatch('setSearchQuery', '');
    };
    
    return {
      searchResults,
      searchQuery,
      toggleFavorite,
      clearSearch
    };
  }
};
</script>
